<template>
  <div class="content">
    <div class="title">{{ nickname }}的{{ type == 1 ? "关注" : "粉丝" }}</div>
    <div class="fansList">
      <div class="contair" @click.stop="toPersonal(item.userId)" v-for="item in userFansList" :key="item.id">
        <div class="avatarUrl">
          <img class="userImg" :src="item.avatarUrl" />
        </div>
        <div class="userInfo">
          <div class="userName">{{ item.nickname }}</div>
          <div>
            <el-button
              v-show="!item.mutual && type == 0"
              @click="getUserFollow(item)"
              size="mini"
              class="guanZhu"
              ><span class="add">+</span>关注</el-button
            >
            <el-button
              v-show="item.mutual && type == 0"
              size="mini"
              class="guanZhu"
              @click="getUserFollowed(item)"
              >已关注</el-button
            >
            <el-button v-show="type == 1" size="mini" class="guanZhu"
              >私信</el-button
            >
            <div class="jianjie">{{ item.signature }}</div>
          </div>

          <div class="fansList">
            <span class="left">歌单：{{ item.playlistCount }}</span>
            <span class="middle">|</span>
            <span class="right">粉丝：{{ item.followeds }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next"
        :page-size="limit"
        :total="total"
        :current-page="offset"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserFans",
  data() {
    return {
      uid: "",
      userFansList: [],
      offset: 0, //当前页数位置
      limit: 30, //每页显示条数
      total: 30, //总数据数量
      nickname: "",
      type: "", //从父组件传进来的属性 用来判断点击的是关注还是粉丝按钮
      t: "",
    };
  },
  methods: {
    //发送请求获取列表 offset是偏移数据 点击第1页获取第0页的数据
    async getUserFans() {
      const { uid, total, type, offset } = this;
      /* console.log(offset); */

      const result = await this.$API.userfans.getUserFans(
        uid,
        this.limit,
        offset ? (this.offset - 1) * this.limit : offset,
        this.type
      );
      console.log(result);
      /*  console.log(uid, this.limit, offset, this.type); */
      //判断拿到的数据是否有size 没有的话就用上面data中的
      if (result.size) {
        this.total = result.size;
      } else {
        this.total = total;
      }

      if (offset) {
        this.offset = offset;
      }

      //根据父属性传进来的type,确定调用哪个接口数据
      if (type == 1) {
        this.userFansList = result.follow;
      } else {
        this.userFansList = result.followeds;
      }
    },

    //发送请求获取用户名
    async getUserInfo() {
      const uid = this.$route.params.userId;
      const { profile } = await this.$API.userfans.getUserInfo(uid);
      this.nickname = profile.nickname;
    },

    //分页器跳转---获取用户当前点击了哪个页面
    handleCurrentChange(value) {
      /*   console.log("handle", value); */
      this.offset = value;
      //发送请求获取相应的页面
      this.getUserFans();
    },
    toPersonal(id){
      this.$router.push({
        name:"Personal",
        params:{
          id
        }
      })
    },

    //关注用户
    async getUserFollow(item) {
      const id = item.userId;
      this.t = 1;
      console.log(id, this.t, item.mutual);
      const result = await this.$API.userfans.getUserFollow(id, this.t);
      console.log(id, this.t, item.mutual, result);

      this.$message({
        message: "关注成功",
        center: true,
        type: "success",
      });

      item.mutual = true;
    },

    //取消关注
    async getUserFollowed(item) {
      const id = item.userId;
      this.t = 222;
      console.log(id, this.t, item.mutual);
      const result = await this.$API.userfans.getUserFollow(id, this.t);
      console.log(id, this.t, item.mutual, result);

      this.$message({
        message: "取消关注",
        center: true,
      });

      item.mutual = false;
      console.log(item.mutual);
    },
  },
  mounted() {
    //渲染页面时先获取用户名和粉丝列表数据
    const { userId, type } = this.$route.params;
    this.uid = userId;
    this.type = type;
    console.log(userId, type);
    this.getUserFans();
    this.getUserInfo();
  },
};
</script>


<style lang="less" scoped>
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: red !important;
  color: white !important;
}
.el-pagination.is-background .el-pager li:hover {
  background-color: #ccc;
  color: black !important;
}
</style>
<style lang="less" scoped>
.content {
  height: 100%;
  width: 1000px;
  padding-top: 50px;
  overflow: auto;

  .title {
    font-size: 20px;
    width: 100%;
    margin: 5px 0 30px 0;
    padding-left: 70px;
    font-weight: 900;
  }
  .fansList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .contair {
      width: 450px;
      height: 100px;
      display: flex;
      margin-bottom: 18px;
      padding-left: 50px;
      .avatarUrl {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;

        .userImg {
          width: 100%;
          height: 100%;
        }
      }
      .userInfo {
        display: flex;
        height: 100%;
        width: 250px;
        padding-left: 10px;
        flex-direction: column;
        justify-content: space-around;

        .userName {
          font-size: 18px;
        }
        .jianjie {
          width: 150px;
          font-size: 14px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .guanZhu {
          margin-left: 200px;
          width: 70px;
          align-items: flex-start;
          border-radius: 20px;
          text-align: center;

          .add {
            color: red;
          }
        }
        .fansList {
          display: flex;
          width: 200px;
          justify-content: space-between;
          font-size: 14px;
          .middle {
            color: #ccc;
          }
        }
      }
    }
  }
  .pagination {
    text-align: center;
    margin-bottom: 80px;
  }
}
</style>
